<template>
	<van-row class="user" align="center" gutter="20">
		<van-col>
			<div class="avatar">
				<avatar></avatar>
			</div>
		</van-col>
		<van-col class="info">
			<div class="info__name">{{ userInfo.name }}</div>
			<div class="info__other">
				{{ userInfo.company }}-{{ userInfo.mobile }}
			</div>
		</van-col>
	</van-row>

	<div class="box">
		<div class="box__ttl">
			<div class="title">
				累计收入
				<span class="time">最新数据: {{ total?.time }}</span>
			</div>
		</div>
		<div class="box__cont">
			<div class="static" gutter="20">
				<div
					class="static__item"
					span="12"
					:style="{
						backgroundImage: `url(${ShouruSvg})`,
						backgroundColor: '#fff9e8'
					}"
				>
					<label>累计保费收入</label>
					<div>{{ total?.totalPremium || '--' }}</div>
				</div>
				<div
					class="static__item"
					span="12"
					:style="{
						backgroundImage: `url(${XiaoshouSvg})`,
						backgroundColor: '#efe9ff'
					}"
				>
					<label>累计销量</label>
					<div>{{ total?.totalSale || '--' }}</div>
				</div>
				<div
					class="static__item"
					span="12"
					:style="{
						backgroundImage: `url(${JoinSvg})`,
						backgroundColor: '#eef5ff'
					}"
				>
					<label>累计参保人数</label>
					<div>{{ total?.totalInsured || '--' }}</div>
				</div>
				<div
					class="static__item"
					span="12"
					:style="{
						backgroundImage: `url(${OutSvg})`,
						backgroundColor: '#fff2f2'
					}"
				>
					<label>累计退保人数</label>
					<div>{{ total?.totalSurrender || '--' }}</div>
				</div>
			</div>
		</div>
	</div>

	<div class="box">
		<div class="box__cont entries">
			<router-link class="entry main" to="/orders" replace>
				<div class="entry__icon">
					<van-icon name="orders-o" size="24" />
				</div>
				<span>展业记录</span>
			</router-link>
			<div class="entry suc" @click="showWait">
				<div class="entry__icon">
					<van-icon name="orders-o" size="24" />
				</div>
				<span>推广激励</span>
			</div>
			<div class="entry err" @click="showWait">
				<div class="entry__icon">
					<van-icon name="orders-o" size="24" />
				</div>
				<span>我的奖励</span>
			</div>
		</div>
	</div>

	<div class="some-duc">
		展业操作指南

		<van-icon name="arrow" />
	</div>
</template>

<script>
import { defineComponent } from 'vue'
import { showToast } from 'vant'
import Avatar from '@/components/avatar'
import { mapGetters } from 'vuex'
const OutSvg = require('@/assets/out.svg')
const ShouruSvg = require('@/assets/shouru.svg')
const XiaoshouSvg = require('@/assets/xiaoshou.svg')
const JoinSvg = require('@/assets/join.svg')
export default defineComponent({
	setup(props, { emit, slots, attrs }) {},
	data() {
		return {
			OutSvg,
			XiaoshouSvg,
			ShouruSvg,
			JoinSvg
		}
	},
	computed: {
		...mapGetters(['total', 'userInfo'])
	},
	mounted() {},
	methods: {
		showWait() {
			showToast({
				message: '暂未开放，敬请期待',
				position: 'bottom'
			})
		}
	},
	components: { Avatar }
})
</script>

<style lang="scss" scoped="scoped">
.user {
	margin: $space_3;
}
.avatar {
	height: 125px;
	width: 125px;
}

.info {
	&__name {
		font-size: $font_large;
		color: $color_main;
	}
	&__other {
		font-size: $font_small;
		color: $color_text_ll;
		margin-top: 18px;
	}
}

.box__ttl {
	.title {
		padding: $space_1;
		span.time {
			font-size: 20px;
			color: $color_text_l;
			padding-left: $space_2;
		}
	}
}
.static {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: $space_2;
}
.static__item {
	font-size: $font_medium_x;
	line-height: 1.8;
	padding: $space_1 $space_4 $space_2;
	border-radius: 40px;
	background: #fff9f9;

	background-size: 115px;
	background-repeat: no-repeat;
	background-position: 215px 50px;
	label {
		color: $color_text_l;
		font-size: $font_small;
	}
}
.entries {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: $space_2;
	.entry {
		display: flex;
		align-items: center;

		&.main {
			color: $color_main;
		}
		&.suc {
			color: $color_suc;
		}
		&.err {
			color: $color_err;
		}

		&__icon {
			background: color-mix(in srgb, currentColor 10%, #fff);
			padding: 20px;
			border-radius: 50%;
			margin-right: $space_2;
		}

		span {
			color: $color_text;
			font-size: $font_medium;
		}
	}
}

.some-duc {
	font-size: $font_small;
	margin: $space_6 $space_3;
	color: $color_text_l;
}
</style>
